<template>
  <div class="set">
    <div class="set-title">
      <h4>登录信息设置：</h4>
    </div>
    <div class="set-body">
      <div class="phone clearfix">
        <span class="left">当前手机号</span>
        <p class="left">可以使用183****4569马上登录</p>
        <button class="right" @click="showMyPhone">更换</button>
      </div>
      <div class="pwd clearfix phone">
        <span class="left">登陆密码</span>
        <p class="left">密码格式为字母+阿拉伯数字的6位密码</p>
        <button class="right" @click="showMyPwd">修改</button>
      </div>
    </div>
    <!-- 修改手机号弹框 -->
    <my-phone ref="myPhone" />
    <!-- 修改密码弹框 -->
    <my-Pwd ref="myPwd"/>
  </div>
</template>

<script>
import myPhone from './phone'
import myPwd from './pwd'
export default {
  name: 'Set',
  components: { myPhone, myPwd },
  data() {
    return {
      showPhone: false
    }
  },
  methods: {
    showMyPhone() {
      this.$refs.myPhone.showCll()
    },
    showMyPwd() {
      this.$refs.myPwd.showPwd()
    }
  }
}
</script>

<style lang="scss" scoped>
.set{
  .set-title{
    width:937px;
    height:60px;
    background:#F8F1F1;
    h4{
      font-size:18px;
      margin-left: 18px;
      font-weight:bold;
      line-height:60px;
    }
  }
  .set-body{
    width: 100%;
    button{
      width:78px;
      height:32px;
      background:#DC3535;
      border-radius:4px;
      color: #FFF;
      font-size: 18px;
      line-height: 24px;
    }
    .phone{
      padding: 16px 0 16px 10px;
      span{
        font-size:18px;
        line-height:24px;
        color:#787878;
      }
      p{
        font-size:18px;
        font-weight:600;
        line-height:24px;
        margin-left: 40px;
      }
    }
    .pwd{
      width: 100%;
      border-top: 1px solid #ECECEC;
    }
  }

}
</style>
